<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<c-nav-bar :title="title" :showHome="false"></c-nav-bar>



		<swiper class="coverImg" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			style="height: 612rpx;">
			<swiper-item class="swiper-items" v-for="item,index in DetailsList.carouselPicList">
				<image class="coverImg" style="width: 100%; height: 100%;" :src="item" mode="aspectFill"></image>
			</swiper-item>
			<!-- 	<view class="care" @click="care">
				<u-icon name="star" color="#fff" size="20"></u-icon>
			</view> -->
		</swiper>


		<view class="info">

			<view class="name">{{DetailsList.waresThali}}</view>
			<view class="price">
				<text>￥</text>
				<text>{{DetailsList.price}}</text>
			</view>
			<view class="title">{{DetailsList.studioName}}</view>
			<view class="bot">
				<u-cell icon="clock" :border="false" :title="DetailsList.businessHours"
					iconStyle="font-size:14px;margin-bottom: -10px;"
					titleStyle="font-size:24rpx;color:#666;margin-bottom: -10px;"></u-cell>
				<u-cell icon="map" :border="false" :title="DetailsList.address" iconStyle="font-size:14px"
					titleStyle="font-size:24rpx;color:#666"></u-cell>
				<view class="concat">
					<view class="i" @click="navigation">
						<image :src="icons[0]"></image>
						<text>路线</text>
					</view>
					<view class="i" @click="phone">
						<image :src="icons[1]"></image>
						<text>电话</text>
					</view>
				</view>
			</view>
		</view>
		<view class="detailContent">
			<view class="tit">商品详情</view>
			<view class="icons">
				<view class="item" v-for="(i,index) in iconsData" :key="index">
					<image :src="i.img"></image>
					<text>{{i.txt}}</text>
				</view>
			</view>
		</view>

		<!-- 详情图片 -->
		<!-- <image v-for="(img,index) in DetailsList.describeLongImage" :key="index" class="detailImg" :src="img"
			bindload="imgInfo" mode="widthFix" :style="{'height':imgHeight||0+'px'}"></image> -->


		<image :src="DetailsList.describeLongImage" bindload="imgInfo" class="detailImg" mode="widthFix"
			:style="{'height':imgHeight||0+'px'}"></image>

		<view class="bottom-input" @click="phone">
			<view>电话咨询</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				h: uni.getSystemInfoSync().windowHeight - 87,
				title: '详情',
				imgWidth: '',
				imgHeight: '',
				current: 0,
				list: [{
					name: '套餐详情'
				}, {
					name: '预订须知'
				}],
				iconsData: [{
					img: 'https://i.ringzle.com/file/20231103/fb33dcd555774292b92d91f54fecf81d.png',
					txt: ''
				}, {
					img: 'https://i.ringzle.com/file/20231103/8222522b15d94bfb8465366f75efd09c.png',
					txt: ''
				}, {
					img: 'https://i.ringzle.com/file/20231103/476d28ca0cfc4e8da39d787cca603de6.png',
					txt: ''
				}, {
					img: 'https://i.ringzle.com/file/20231103/9c0be1495ba6424d818b9e1269e64acf.png',
					txt: ''
				}, {
					img: 'https://i.ringzle.com/file/20231103/d8e6a28a1c79499495d00109982b2ebc.png',
					txt: ''
				}, {
					img: 'https://i.ringzle.com/file/20231103/a7f016c400c94115a686fbd85a481f26.png',
					txt: ''
				}],
				// 电话，导航
				icons: [
					'https://i.ringzle.com/file/20231108/6dd3981b04fe44bf89a1224767a9ae6d.png',
					'https://i.ringzle.com/file/20231103/b7636653f0f04e3f9cf7a8966c1a9f37.png',
				],
				detailImgs: ['https://i.ringzle.com/file/20231108/61f8aa14e4a6455aacbc3562ea378142.png'],
				coverImg: 'https://i.ringzle.com/file/20231108/1cfe63fe6e6d4fb3b06f9f89f581f814.png',
				DetailsList: {},
				id: ''
			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			this.getDetails(option.id)
		},
		methods: {
			// 获取详情数据
			getDetails(id) {
				console.log(this.id);
				this.$api.get('/api/tourShoot/followUpDetails?id=' + this.id).then(res => {
					console.log(res);
					this.DetailsList = res.data.data

					this.iconsData[0].txt = this.DetailsList.describeOne
					this.iconsData[1].txt = this.DetailsList.describeTwo
					this.iconsData[2].txt = this.DetailsList.describeThree
					this.iconsData[3].txt = this.DetailsList.describeFour
					this.iconsData[4].txt = this.DetailsList.describeFive
					this.iconsData[5].txt = this.DetailsList.describeSix
				})
			},




			// 导航
			navigation() {
				uni.openLocation({
					latitude: Number(this.DetailsList.latitude),
					longitude: Number(this.DetailsList.longitude),
					name: this.DetailsList.studioName,
				});
			},
			// 联系商家
			phone() {
				uni.makePhoneCall({
					phoneNumber: this.DetailsList.phone //仅为示例
				});
			},

			click(e) {
				this.current = e.index
			},
			imgInfo(event) {
				this.setData({
					imgWidth: event.detail.width,
					imgHeight: event.detail.height
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .navbar{
	// 	background-color: rbga(0,0,0,0);
	// }
	.page {
		// padding-top: 100rpx;
		background-color: #F5F8FA;
		padding-bottom: 180rpx;
		overflow-x: hidden;
	}

	.bottom-input {
		position: fixed;
		background-color: #FFFFFF;
		bottom: 0;
		// height: 136rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		text-align: center;

		:nth-child(1) {
			height: 88rpx;
			line-height: 88rpx;
			width: 690rpx;
			background-color: #007A69;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: Regular;
			color: #FFFFFF;
			text-align: center;
			margin: 20rpx auto;
		}
	}




	.coverImg {
		width: 100%;
		height: 470rpx;
	}

	.info {
		padding: 56rpx 24rpx 40rpx;
		margin-bottom: 20rpx;
		background: #fff;
		position: relative;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #111;
			margin-bottom: 24rpx;
		}

		.name {
			font-size: 34rpx;
			font-weight: 600;
			color: #111;
			margin-bottom: 24rpx;
		}

		.price {
			margin-bottom: 40rpx;

			text {
				color: #FD3939;
				font-size: 24rpx;

				&:nth-child(2) {
					font-size: 40rpx;
				}
			}
		}

		.bot {
			margin: -20rpx -30rpx;
		}

		.concat {
			position: absolute;
			right: 0;
			bottom: 40rpx;
			z-index: 1;
			text-align: right;

			.i {
				display: inline-block;
				width: 48rpx;
				margin-right: 48rpx;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 6rpx;
				}

				text {
					font-size: 20rpx;
					color: #808080;
				}
			}
		}
	}

	.detailContent {
		padding: 40rpx 24rpx;
		background-color: #fff;

		.tit {
			font-size: 36rpx;
			color: #111;
			font-weight: 600;
			margin-bottom: 60rpx;
		}

		.icons {
			display: grid;
			grid-template-columns: auto auto auto;
			align-items: center;
			gap: 36rpx;
			text-align: center;

			image {
				width: 48rpx;
				height: 48rpx;
				;
				margin-bottom: 6rpx;
			}

			text {
				display: block;
				font-size: 24rpx;
				color: #333;
			}
		}
	}

	.detailImg {
		width: 100%;
		padding-bottom: 100rpx;

	}
</style>